<template>
  <q-img
    class="t-img"
    spinner-color="white"
    v-show="mappingProps.visible"
    v-bind="{ ...attrs, ...mappingProps }"
    :alt="mappingProps.alt"
    :src="trueSrc"
    :img-style="{ borderRadius: '2px' }"
    @click="onClickHandler"
    @error="onErrorHandler"
    @load="onLoadHandler"
		tabindex="-1"
  >
    <!-- 字幕，说明文字 -->
    <div v-if="caption" class="absolute-bottom text-subtitle1 text-center">
      {{ caption }}
    </div>
    <!-- 加载失败时提示alt文字 -->
    <template v-slot:error>
      <div
        class="u-error flex flex-center"
        :ref="el => (errorDiv = el)"
        draggable="true"
      >
        <i
          class="i-diagonal-1"
          :style="{ transform: `rotate(${errorRotate}deg)` }"
        ></i>
        <i
          class="i-diagonal-2"
          :style="{ transform: `rotate(-${errorRotate}deg)` }"
        ></i>
        <span>{{ mappingProps.alt ?? '' }}</span>
      </div>
    </template>
  </q-img>
</template>

<!-- ts只是方便开发提示和补全代码，没有用语法 -->

<script setup type="typescript">
import QImg from '@teld/q-components/Img';
import useMappingProps from 't/common/hooks/useMappingProps';
import {
	commonProps
} from 't/common/utils';
import { computed, useAttrs, ref, nextTick, watch } from 'vue';

// 直接映射透传qursor的属性
const attrs = useAttrs();
// 组件传参
const props = defineProps(
	{
		...commonProps,

		// v-module绑定值 低代码统一提供的数据源，猜想
		modelValue: String,

		// 也可以作为数据源
		src: String,

		// 样片地址
		imgSrc: String,

		// 加载失败提示文字
		alt: String,

		// 字幕，说明文字
		caption: String,
	},
);
// 大写首字母属性
const [mappingProps, mappingExpose] = useMappingProps(props);

// 获取容器对角线的顶角角度
function getErrorRotate(node) {
	if (!(node && node instanceof HTMLElement)) return 0;
	const { clientWidth, clientHeight } = node;
	if (!clientWidth || !clientHeight) return 0;
	return Math.atan(((clientHeight) / (clientWidth))) * 180 / Math.PI;
}
// 错误容器实例
const errorDiv = ref(null);
// 动态计算错误容器的对角线顶角
const errorRotate = ref(getErrorRotate(errorDiv.value))
watch(() => errorDiv.value, () => {
	nextTick(() => {
		const rotate = getErrorRotate(errorDiv.value);
		if (rotate) {
			errorRotate.value = rotate
		}
	})
})

// 是否设计时
const inDesign = ref(!!window['fas']?.inDesign);

// 兼容 src imgSrc
const trueSrc = computed(() => mappingProps.src || mappingProps.imgSrc || 'x');
// 暴漏外部
defineExpose({ ...mappingExpose, trueSrc });
// 触发的emit事件
const emit = defineEmits(['click', 'load', 'error']);
// 点击图片事件
function onClickHandler(params) { emit('click', params) }
// 图片加载失败回调
function onErrorHandler(params) { emit('error', params) }
// 图片加载完成回调
function onLoadHandler(params) { emit('load', params) }
</script>

<style lang="scss">
.t-img {
  .u-error {
    position: absolute;
    box-sizing: border-box;
    top: -1000%;
    left: -1000%;
    right: -1000%;
    bottom: -1000%;
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: #fff;
    color: rgba(#000, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
    font-size: 18px;
    border: 16px solid #f0f2f5;
    overflow: hidden;
    border-radius: 2px;

    > span {
      position: absolute;
      top: -1000%;
      left: -1000%;
      right: -1000%;
      bottom: -1000%;
      width: 100%;
      height: 50px;
      margin: auto;
      z-index: 2;
      display: block;
      line-height: 50px;
      background-color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-wrap: normal;
      text-align: center;
    }

    .i-diagonal-1 {
      content: '';
      position: absolute;
      display: block;
      z-index: 1;
      top: 0;
      left: 0;
      width: 10000px;
      height: 10000px;
      border-top: 1px solid rgba(#000, 0.32);
      transform: rotate(45deg);
      transform-origin: top left;
    }

    .i-diagonal-2 {
      content: '';
      position: absolute;
      display: block;
      z-index: 1;
      bottom: 0;
      left: 0;
      width: 10000px;
      height: 10000px;
      border-bottom: 1px solid rgba(#000, 0.32);
      transform: rotate(-45deg);
      transform-origin: bottom left;
    }
  }
}
</style>
